:host {
  --ti-avatar-width-default: var(--ti-common-size-14x);
  --ti-avatar-width-xs: var(--ti-common-size-9x);
  --ti-avatar-width-small: var(--ti-common-size-12x);
  --ti-avatar-width-large: var(--ti-common-size-16x);
  --ti-avatar-width-xl: var(--ti-common-size-18x);
  --ti-avatar-border-radius-square: 15%;
}

:host {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ti-common-border-radius-3);
  width: var(--ti-avatar-width-default);
  height: var(--ti-avatar-width-default);
  font-size: calc(var(--ti-avatar-width-default) / 3);
  background-color: var(--ti-common-color-bg-secondary);
  color: var(--ti-common-color-icon-white);
}

:host.ti3-avt-shape-square {
  border-radius: var(--ti-avatar-border-radius-square);
}

:host.ti3-avt-xs {
  width: var(--ti-avatar-width-xs);
  height: var(--ti-avatar-width-xs);
  font-size: calc(var(--ti-avatar-width-xs) / 3);
}

:host.ti3-avt-small {
  width: var(--ti-avatar-width-small);
  height: var(--ti-avatar-width-small);
  font-size: calc(var(--ti-avatar-width-small) / 3);
}

:host.ti3-avt-large {
  width: var(--ti-avatar-width-large);
  height: var(--ti-avatar-width-large);
  font-size: calc(var(--ti-avatar-width-large) / 3);
}

:host.ti3-avt-xl {
  width: var(--ti-avatar-width-xl);
  height: var(--ti-avatar-width-xl);
  font-size: calc(var(--ti-avatar-width-xl) / 3);
}

.ti3-avt-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.ti3-avt-txt {
  position: absolute;
  white-space: nowrap;
  text-shadow: black 0.1em 0.1em 0.2em;
}
